<template>
	<view>
		<view class="menu">
			<uni-search-bar placeholder="输入水果关键字..." class="search" radius="18" v-model="search_val">
				<uni-icons slot="searchIcon" color="#999999" size="18" type="home" />
			</uni-search-bar>
		</view>
		<view class="navigat">
			<view class="navigat-for" v-for="(item,index) in selected">
				<view class="pic" v-if="item.select" @click="change(item.id)">
					<image class="pic-t" :src="icons[index].is" mode="widthFix"></image>
					<span class="txt" style="color: #0c34ba;">{{item.title}}</span>
				</view>
				<view class="pic" v-else @click="change(item.id)">
					<image class="pic-t" :src="icons[index].no" mode="widthFix"></image>
					<span class="txt">{{item.title}}</span>
				</view>
			</view>
		</view>
		<view v-if="(alls && !news && !hist)">
			<view class="his-up" v-if="hotgoods.length === 0">
				看起来还没有新闻，先逛逛吧！
			</view>
			<view class="his-down" v-else>
				<view class="news-for" v-for="item in hotgoods" :key="item.id">
					<view class="news" @click="infof(item.tite,item.image,item.id)">
						<image class="news-image" :src="item.image" mode="widthFix"></image>
						<view class="news-text">
							<view class="title">
								{{item.tite}}
							</view>
							<view class="stitle">
								{{item.stitle}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-else-if="!alls && news && !hist">
			<view class="his-down">
				<view class="news-for" v-for="item in hotgoods" :key="item.id">
					<view class="news" @click="infof(item.tite,item.image,item.id)">
						<image class="news-image" :src="item.image" mode="widthFix"></image>
						<view class="news-text">
							<view class="title">
								{{item.tite}}
							</view>
							<view class="stitle">
								{{item.stitle}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-else>
			3
		</view>
		<view class="info">
			什么都没有啦！
		</view>
	</view>
</template>

<script>
	export default {
		onShow() {
			this.getval()
		},
		data() {
			return {
				alls: true,
				news: false,
				hist: false,
				search_val: "",
				hotgoods: [{
						"id": 1,
						"tite": "水果顶流阳光玫瑰，凉了",
						"image": "../../static/阳光玫瑰.jpg",
						"stitle": "昔日“顶流”、它的价格是怎么一步步降至现在？"
					},
					{
						"id": 2,
						"tite": "1.4万吨柬埔寨龙眼已出口中国！",
						"image": "../../static/龙眼.jpg",
						"stitle": "去年10月27日至今年10月27日，柬埔寨已累计向中国出口了1.4万吨新鲜龙眼。"
					}
				],
				icons: [{
						"no": "../../static/果盘.png",
						'is': '../../static/果盘1.png'
					},
					{
						"is": "../../static/新闻.png",
						'no': '../../static/新闻灰.png'
					},
					{
						"no": "../../static/云历史.png",
						'is': '../../static/云历史1.png'
					}
				],
				selected: [{
					"select": true,
					"title": "总览",
					"id": 0
				}, {
					"select": false,
					"title": "新闻",
					"id": 1
				}, {
					"select": false,
					"title": "历史",
					id: 2
				}]
			};
		},
		methods: {
			getval() {
				let str = uni.getStorageSync('search_val')
				this.search_val = str
				console.log(str)
			},
			infof(name, image, id) {
				const mid = {
					'id': id,
					'title': name,
					'image': image,
					'tag': "news"
				}
				uni.setStorageSync('name', mid)
				uni.navigateTo({
					url: '../infomation/infomation'
				});
			},
			change(id) {
				const mid = this.selected[id]
				if (!mid.select) {
					if (this.selected[id].title === "总览") {
						this.alls = true
						this.hist = false
						this.news = false
					} else if (this.selected[id].title === "新闻") {
						this.alls = false
						this.hist = false
						this.news = true
					} else {
						this.alls = false
						this.hist = true
						this.news = false
					}
					this.selected[id].select = true
					for (var i = 0; i < this.selected.length; i++) {
						if (i !== id) {
							this.selected[i].select = false
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.menu {
		width: 100%;
		display: flex;
		justify-content: space-between;
		/* padding: 3px; */
		background-color: #fff;

		.search {
			/* width: 60%; */
			flex: 1;
		}

		::v-deep .uni-searchbar__box {
			justify-content: flex-start;

			.uni-searchbar__box-icon-search {
				padding: 0 0 0 8px;

				.uni-icons {
					color: #0c34ba !important;
				}
			}
		}
	}

	.navigat {
		width: 100%;
		padding: 10px;
		display: flex;
		margin-top: 10px;
		justify-content: space-between;
		background-color: #fff;
		border-radius: 8px;

		.navigat-for {
			width: 30%;
			margin-left: calc(100vw - 360px);

			.pic {
				display: flex;
				flex-direction: column;

				.pic-t {
					width: 50%;
				}

				.txt {
					margin-left: 8px;
				}
			}
		}
	}

	.his-up {
		color: #8f8b8b;
		font-size: 15px;
		text-align: center;
		font-weight: 5px;
	}

	.his-down {
		.news-for {
			padding-bottom: 10px;
			padding-top: 10px;

			.news {
				display: flex;
				justify-content: space-between;
				background-color: #fff;
				border-radius: 8px;

				.news-image {
					width: 40%;
					height: 30%;
				}

				.news-text {
					width: 58%;
					display: flex;
					padding: 10px;
					flex-direction: column;

					.title {
						width: 100%;
						color: #0c34ba;
						font-family: 黑体;
						font-weight: bold;
						font-size: 18px;
						margin-bottom: 10%;
					}

					.sttitle {
						width: 100%;
						color: #8f8b8b;
						font-size: 10px;
					}
				}
			}
		}
	}


	.info {
		margin-top: 20px;
		width: 100%;
		color: #8f8b8b;
		font-size: 15px;
		text-align: center;
	}
</style>